<div class="cly-vue-data-manager__events">
    <cly-main>
        <cly-notification v-if="limits && limits.show" class="cly-vue-data-manager__alerts bu-mx-5 bu-mb-5" :text="limits.message" color="light-warning">
        </cly-notification>
        <cly-datatable-n
        ref="eventsDefaultTable"
        :searchPlaceholder="i18n('data-manager.event-search-placeholder')"
        :rows="events"
        :keyFn="function(row) {return row.key ||row.e || row.name}"
        :indent=0
        :force-loading="isLoading"
        :tracked-fields="trackedFields"
        @select-all="handleAllChange"
        @select="handleCurrentChange"
        :available-dynamic-cols="dynamicEventCols"
        :persist-key="eventsTablePersistKey"
        :default-sort="{prop: 'lastModifiedts', order: 'descending'}">

            <template v-slot:header-left>
                <cly-multi-select
                 ref="eventCategoryFilters" 
                 v-bind:arrow="true"
                 :selectXWidth="336"
                 v-model="filter" 
                 :fields="filterFields">
                    <template v-slot:action>
                        <div class="bu-level-item bu-is-clickable text-small color-red-100 bu-pl-1">
                            <a @click="manageCategories">Manage</a>
                        </div>
                    </template>
                </cly-multi-select>
            </template>

            <template v-slot="scope">   
                <el-table-column v-if="canUserUpdate || canUserDelete" fixed="left" type="selection" :reserve-selection="true" width="55" prop="isSelected">
                </el-table-column>

                <el-table-column fixed="left" min-width="330" sortable="custom" prop="name" :label="i18n('data-manager.event-name')">
                    <template v-slot="rowScope">
                        <!-- <div @click="onRowClick(rowScope.row)" class="cly-vue-data-manager__clickable bu-is-clickable color-dark-blue-100">{{rowScope.row.name || rowScope.row.key || rowScope.row.e}}</div> -->
                        <a v-bind:href="'#/manage/data-manager/events/events/' + rowScope.row.key" @click="onRowClick(rowScope.row)" class="cly-vue-data-manager__clickable bu-is-clickable color-dark-blue-100">
                            <div v-html="rowScope.row.name || rowScope.row.key || rowScope.row.e"></div>
                        </a>
                        <div v-if="rowScope.row.audit && rowScope.row.audit.userName" class="text-small color-cool-gray-50">Last modified by {{rowScope.row.audit.userName}}</div>
                        <div>
                            <span v-if="isDrill" class="tag-container">
                                <span v-bind:class="statusClassObject(rowScope.row.status)" class="bu-tag bu-mt-1"> 
                                    <span class="blinker"></span>
                                    <span>{{rowScope.row.status}}</span>
                                </span>
                            </span>
                            <span v-if="rowScope.row.is_visible === false" class="cly-vue-data-manager__hidden-icon">
                                <i class="ion-eye-disabled"></i>
                            </span>
                            <span v-else class="cly-vue-data-manager__hidden-icon"><i class="ion-eye"></i></ion-icon></span>
                            <span v-if="eventTransformationMap && eventTransformationMap[rowScope.row.key]" class="cly-vue-data-manager__transform-icon">
                                <svg width="12px" height="10px" viewBox="0 0 12 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="transformations" transform="translate(-320.000000, -295.000000)" fill="#444444" fill-rule="nonzero">
                                            <g id="Group-9" transform="translate(320.000000, 292.000000)">
                                                <g id="merge_type-24px" transform="translate(46.500000, 8.000000) rotate(90.000000) translate(-46.500000, -8.000000) translate(38.500000, -38.500000)">
                                                    <path fill="#fff" d="M11.3333333,92.6066667 L12.2733333,91.6666667 L10,89.3933333 L9.06,90.3333333 L11.3333333,92.6066667 Z M5,84.3333333 L7.33333333,84.3333333 L7.33333333,88.06 L3.72666667,91.6666667 L4.66666667,92.6066667 L8.66666667,88.6066667 L8.66666667,84.3333333 L11,84.3333333 L8,81.3333333 L5,84.3333333 Z" id="Shape"></path>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </span>
                        </div>
                    </template>
                </el-table-column>

                <template v-for="(col,idx) in scope.dynamicCols" :prop="col.value">

                    <el-table-column v-if="col.value === 'category'"
                        min-width="250" sortable="custom" prop="categoryName" :label="i18n('data-manager.category')">
                        <template v-slot="rowScope">
                            <div v-html="rowScope.row.categoryName"></div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else-if="col.value === 'lastModifiedts'"
                        prop="lastModifiedts" column-key="lastModifiedDate" sortable="custom" min-width="275" :label="i18n('data-manager.last-modified')">
                        <template v-slot="rowScope">
                            <div v-if="rowScope.row && rowScope.row.lastModifiedts">
                                <div>{{rowScope.row.lastModifiedDate || i18n('data-manager.empty-placeholder') }}</div>
                                <span class="text-small color-cool-gray-50">{{rowScope.row.lastModifiedTime}}</span>
                            </div>
                            <div v-else>
                                {{ i18n('data-manager.empty-placeholder') }}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else-if="col.value === 'lts' && isDrill" sortable="custom" min-width="250" prop="lts" :label="i18n('data-manager.last-triggered')">
                        <template v-slot="rowScope">
                            <div v-if="rowScope.row && rowScope.row.lts">
                                <div>{{rowScope.row.lastTriggerDate || i18n('data-manager.empty-placeholder') }}</div>
                            </div>
                            <div v-else>
                                {{ i18n('data-manager.empty-placeholder') }}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else-if="col.value === 'totalCount' " sortable="custom" min-width="250" prop="totalCount" label="Count">
                        <template v-slot="rowScope">
                                <div>{{rowScope.row.totalCountFormatted || i18n('data-manager.empty-placeholder') }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else-if="col.value === 'description' " sortable="custom" min-width="250" prop="description" :label="i18n('data-manager.description')">
                        <template v-slot="rowScope">
                                <div v-html="rowScope.row.description || i18n('data-manager.empty-placeholder')"></div>
                        </template>
                    </el-table-column>

                    <el-table-column v-else v-bind:sortable="col.sort ? 'custom' : false" :key="idx" min-width="300" :prop="col.value" :label="col.label">
                        <template v-slot="rowScope">
                            <div v-html="rowScope.row[col.value] || i18n('data-manager.empty-placeholder')"></div>
                        </template>
                    </el-table-column>
                </template>  

                <el-table-column type="options" align="center">
                    <template v-slot="rowScope">
                        <cly-more-options v-if="(canUserUpdate || canUserDelete) && rowScope.row.hover" size="small" @command="handleCommand($event, scope, rowScope.row)">
                            <el-dropdown-item v-if="canUserUpdate" command="edit">{{i18n('common.edit')}}</el-dropdown-item>
                            <el-dropdown-item v-if="canUserDelete" command="delete">{{i18n('common.delete')}}</el-dropdown-item>
                        </cly-more-options>
                    </template>
                </el-table-column>

            </template>
            <template v-slot:bottomline="scope">
                <cly-diff-helper v-if="canUserUpdate || canUserDelete" class="action-bar" :diff="scope.diff" @discard="scope.unpatch()">
                    <template v-slot:main>
                        <div class="bu-mr-0 bu-is-flex bu-is-justify-content-flex-end bu-is-align-items-center" style="height: 100%;">
                            <cly-more-options class="bu-mr-3" size="small" :text="i18n('data-manager.change-category')" type="default" icon="el-icon-crop" @command="handleChangeCategory($event, scope.diff)">
                                <el-dropdown-item command=null>{{ i18n('data-manager.uncategorized') }}</el-dropdown-item>
                                <el-dropdown-item :command="cat._id" :key="idx" v-for="(cat, idx) in categories">{{cat.name}}</el-dropdown-item>
                            </cly-more-options>
                            <cly-more-options v-if="isDrill" class="bu-mr-3" size="small" text="Change Status" type="default" icon="el-icon-s-tools" @command="handleChangeStatus($event, scope.diff)">
                                <el-dropdown-item command="live">{{ i18n('data-manager.live') }}</el-dropdown-item>
                                <el-dropdown-item command="approved">{{ i18n('data-manager.approved') }}</el-dropdown-item>
                                <el-dropdown-item command="unplanned">{{ i18n('data-manager.unplanned') }}</el-dropdown-item>
                                <el-dropdown-item command="created">{{ i18n('data-manager.created') }}</el-dropdown-item>
                                <el-dropdown-item command="blocked">{{ i18n('data-manager.blocked') }}</el-dropdown-item>
                            </cly-more-options>
                            <cly-more-options class="bu-mr-3" size="small" :text=" i18n('data-manager.change-visibility') " type="default" icon="el-icon-view" @command="handleChangeVisibility($event, scope.diff)">
                                <el-dropdown-item command="visible">{{ i18n('data-manager.visible') }}</el-dropdown-item>
                                <el-dropdown-item command="hidden">{{ i18n('data-manager.hidden') }}</el-dropdown-item>
                            </cly-more-options>
                            
                            <el-button v-if="canUserDelete" class="bu-mr-3" size="small" type="default" icon="el-icon-delete-solid" @click="handleDelete(scope.diff)">{{ i18n('common.delete') }}</el-button>
                        </div>
                    </template>
                </cly-diff-helper>
            </template>
        </cly-datatable-n>
    </cly-main>

    <cly-confirm-dialog 
    @cancel="closeDeleteForm" 
    @confirm="submitDeleteForm" 
    :before-close="closeDeleteForm" 
    ref="deleteConfirmDialog" 
    :visible.sync="showDeleteDialog" 
    dialogType="danger" 
    :saveButtonLabel="i18n('common.delete')" 
    :cancelButtonLabel="i18n('common.no-dont-delete')" 
    :title="i18n('data-manager.delete-events')">
        <template slot-scope="scope">
            {{i18n('data-manager.delete-event-permanently')}}<br/> 
            <small class="color-red-100">{{ i18n('data-manager.delete-event-warning') }}</small>
            <ul>
             <li v-for="ev in deleteQueue"> {{ev.key || ev.e || ev.name}}</li>
            </ul>
        </template>
    </cly-confirm-dialog>
    <cly-form-dialog
        name="Manage Categories"
        :title="i18n('data-manager.manage-categories')"
        @submit="onSaveCategories"
        :closeFn="onCloseCategories"
        saveButtonLabel="Save"
        :isOpened="categoryDialogVisible"
        v-bind="categories">
        <template v-slot="formDialogScope">
            <data-manager-manage-category
		        :max-categories="100"
                :deletedCategories="deletedCategories"
		        v-model="categories">
            </data-manager-manage-category>
        </template>
    </cly-form-dialog>
</div>